<template>
	<div class="main-box">
		<OrgTree ref="orgTreeRef" @node-click="nodeClick" @back-org="backOrgData" />
		<div class="table-box">
			<ProTable ref="proTableRef" title="组织列表" :columns="columns" :requestApi="positionApi.page" 
				:initParam="queryParams"
				:dataCallback="dataCallback">
				<template #tableHeader>

					<el-button size="default" type="success" class="ml10" @click="openAddPos()" v-auth="'system:position:add'">
						<el-icon><ele-CirclePlus /></el-icon>{{$t('message.posOperation.add')}}
					</el-button>
				</template>
				<template #operation="scope">
					<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditPos(scope.row)" v-auth="'system:position:update'"> {{$t('message.posOperation.edit')}} </el-button>
								<el-button icon="ele-Delete" size="small" text type="danger" @click="delPos(scope.row)" v-auth="'system:position:delete'"> {{$t('message.posOperation.delete')}} </el-button>
				</template>
			</ProTable>
			<EditPosition ref="editPosRef" :title="state.editPosTitle" :orgData="state.orgTreeData" :dictData="state.dictData" @refresh="handleQuery"/>
		</div>
	</div>

</template>

<script lang="tsx" setup name="systemPosition">
import { reactive, ref, watchEffect } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import OrgTree from '/@/views/system/org/component/orgTree.vue';
import EditPosition from '/@/views/system/position/component/editPosition.vue';

import { feature} from '/@/utils/axios-utils';
import { SysDictData, SysOrg, SysPosition } from '/@/api-services/models/system';
import { useI18n } from 'vue-i18n';
import ProTable from '/@/components/ProTable/index.vue';
import positionApi from '/@/api-services/apis/system/positionApi';
import dictDataApi from '/@/api-services/apis/system/dictDataApi';
import { ColumnProps } from '/@/components/ProTable/interface';
// 定义变量内容
const { t } = useI18n();
const proTableRef = ref();
const editPosRef = ref<InstanceType<typeof EditPosition>>();
const orgTreeRef = ref<InstanceType<typeof OrgTree>>();
const queryParams = reactive({
	orgId:-1,
});
const state = reactive({
	loading: false,
	posData: [] as Array<SysPosition>, // 机构列表数据
	orgTreeData: [] as Array<SysOrg>, // 机构树所有数据
	dictData:[] as Array<SysDictData>,//字典数据		
	editPosTitle: '',
	checkAll: false,
    isIndeterminate: true
});


//数据回显处理
const dataCallback = (queryRes: any) => {
	var data = queryRes.data;
	return {
		items: data.items,
		totalCount: data.totalCount,
		pageIndex: data.pageIndex,
		pageSize: data.pageSize
	};
};

const columns: ColumnProps<SysPosition>[] = [
	{
		prop: "name", label: t('message.posInfo.posName'),
		// search: {
		// 	el: "input", key: "name",
		// 	props: { placeholder: t('message.posInfo.posName') }
		// }
	},
	{ prop: "category", label: t('message.posInfo.posType'),
		render:scope=>{
			var data=state.dictData.filter(item=>item.value==scope.row.category)[0]
			return (<el-tag size={data.tagSize} type={data.tagType}> {data.name}</el-tag>)    
		},
		search: {
			el: "select", key: "category",
			props: { placeholder:  t('message.posInfo.posType') }
		} 
	},
	{ prop: "code", label: t('message.posInfo.posCode'), },
	{ prop: "remark", label: t('message.orgInfo.remark'), },
	{ prop: "sortCode", label: t('message.orgInfo.sortCode'), },
	{ prop: "updateTime", label: t('message.orgInfo.editTime'), },
	{ prop: "operation", label: "操作", fixed: "right" }
]
const queryPosType = async ()=>{
	var res = await dictDataApi.getDatalistByType("posType")
	state.dictData=res.data.data??[]
}

//获取子组件传递的组织数据
const backOrgData=(orgData:Array<SysOrg>)=>{	
	state.orgTreeData=orgData
}
// 查询操作
const handleQuery = async () => {
	proTableRef.value.getTableList();
};


// 打开新增页面
const openAddPos = () => {
	state.editPosTitle = t('message.posOperation.addPos');
	editPosRef.value?.openDialog({ status: 1 });
};

// 打开编辑页面
const openEditPos = (row: any) => {
	state.editPosTitle = t('message.posOperation.editPos');
	editPosRef.value?.openDialog(row);
};

// 删除
const delPos = (row: any) => {
	ElMessageBox.confirm(`${t('message.posAlter.isDeletePos')}:【${row.name}】?`, t('message.posAlter.alter'), {
		confirmButtonText: t('message.posAlter.confirm'),
		cancelButtonText:  t('message.posAlter.cancel'),
		type: 'warning',
	})
		.then(async () => {
			const [err]=await feature(positionApi.delete([{id:row.id} ]))
			if(err){
				ElMessage.error(err.message)
			}
			else{
				ElMessage.success(t('message.posAlter.deleteSuccess'));
				handleQuery();
			}			
		})
		.catch(() => {});
};

// 树组件点击
const nodeClick = async (node: any) => {
	queryParams.orgId = node.id;
	handleQuery();
};
watchEffect(() => {
	queryPosType()
});
</script>
